.el-header {
  color: #333;
  text-align: center;
  line-height: 60px;

  border-bottom: 1px solid var(--common_line_light_color, rgba(126,134,142,.16));
}

.el-aside {
  background-color: #fff;
  color: #333;
  text-align: center;
  line-height: 100%;
  height: calc(100vh - 60px);
  margin-bottom: auto;
  width: 200px;
  border-right: 1px solid rgba(126,134,142,.16);
  padding: 8px 10px;
}

.main {
  background-color: #f2f6fc;
  width: 100%;
  padding: 10px;
}

body > .el-container {
  margin-bottom: 40px;
}

.components {
  display: flex;
  flex-direction: column;
  .components-item {
    width: 100%;
    display: grid;
    grid-template-columns: repeat(2, 45%);
    grid-template-rows: repeat(auto-fill, 50px);
    column-gap: 10px;
    row-gap: 15px;
    align-items: center;
    overflow: auto;
    justify-content: center;
    margin: 5px;
    .item-card {
      height: 50px;
      line-height: 50px;
      border: 1px solid #DCDFE6;
      padding: 10px 20px;
      font-size: 14px;
      border-radius: 4px;
      display: flex;
      align-items: center;
      justify-content: flex-start;
    }
  }
}
.vue-grid-layout {
  background: #eee;
}

.vue-grid-item:not(.vue-grid-placeholder) {
  background: #fff;
  border: 1px solid rgba(126,134,142,.16);
}

.vue-grid-item .resizing {
  opacity: 0.9;
}

.vue-grid-item .static {
  background: #cce;
}

.vue-grid-item .text {
  font-size: 24px;
  text-align: center;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
  height: 100%;
  width: 100%;
}

.vue-grid-item .no-drag {
  height: 100%;
  width: 100%;
}

.vue-grid-item .minMax {
  font-size: 12px;
}

.vue-grid-item .add {
  cursor: pointer;
}

.vue-draggable-handle {
  position: absolute;
  width: 20px;
  height: 20px;
  top: 0;
  left: 0;
  background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='10'><circle cx='5' cy='5' r='5' fill='#999999'/></svg>") no-repeat;
  background-position: bottom right;
  padding: 0 8px 8px 0;
  background-repeat: no-repeat;
  background-origin: content-box;
  box-sizing: border-box;
  cursor: pointer;
}

